type SafeAreaInset = { 
  top: number, 
  bottom: number, 
  left: number, 
  right: number 
};

interface State {
  inset: SafeAreaInset;
  contentInset: SafeAreaInset;
}

if (bindCssVars.isAvailable()) {
  bindCssVars();
}

// --tg-safe-area-inset-top: 0px;
// --tg-safe-area-inset-bottom: 30px;
// --tg-safe-area-inset-left: 40px;
// --tg-safe-area-inset-right: 40px;

// --tg-content-safe-area-inset-top: 40px;
// --tg-content-safe-area-inset-bottom: 0px;
// --tg-content-safe-area-inset-left: 0px;
// --tg-content-safe-area-inset-right: 0px;

if (bindCssVars.isAvailable()) {
  bindCssVars((component, property) => `--my-prefix-${component}-${property}`);
}

// --my-prefix-safeArea-top: 0px;
// --my-prefix-safeArea-bottom: 30px;
// --my-prefix-safeArea-bottom: 40px;
// --my-prefix-safeArea-right: 40px;
 
// --my-prefix-contentSafeArea-top: 40px;
// --my-prefix-contentSafeArea-bottom: 0px;
// --my-prefix-contentSafeArea-left: 0px;
// --my-prefix-contentSafeArea-right: 0px;